<template>
  <div class="container">
    <div class="cell-wrapper">
      <div class="header">
      <span class="fa-stack fa-lg" style="color: #26a2ff;">
        <i class="fa fa-circle fa-stack-2x"></i>
        <i class="fa fa-hand-o-right fa-stack-1x fa-inverse"></i>
      </span>
        <span v-text="room.name"></span>
      </div>
      <div class="content">
      <span>
         <i :class="['fa', room.type ==='true' ? 'fa-check-square-o green': 'fa-square-o black']"></i>
        <em>专用会议室</em>
      </span>
        <span>
        <i :class="['fa', room.projector ==='true' ? 'fa-check-square-o green': 'fa-square-o black']"></i>
        <em>投影仪：</em>
      </span>
        <span>
        <em>容纳人数:</em>
        <span v-text="room.num + '人'"></span>
      </span>
      </div>
    </div>
    <div class="cell-right-wrapper">
    </div>
  </div>
</template>
<script>
  export default{
    props:['room']
  }
</script>
<style scoped lang="scss">
  @import '../../base/css/_base';
  .container{
    background:#fff;
    margin: 10px 0;
    shadow: 10px 10px 5px #888888;
    border-radius: 5px;
    @include flex-left;
    .cell-wrapper{
      flex: 1;
      .header{
        padding: 10px 20px;

        span{
          @include fz(5px);
          color: #1c2438;
          font-weight: 700;
        }
      }
      .content{
        padding: 5px 30px;
        span{
          @include fz(4px);
          margin: 0 10px;
        }
      }
    }
    .cell-right-wrapper {
      background: #ce3c39;
      display: table-cell;
      vertical-align: middle;
      height: inherit;
      position: relative;
      height: 100%;
    }
  }

  .green {
    color: #1aad19;
  }

  .red {
    color: #ce3c39;
  }
  .black{
    color: #0d0d0d;
  }
</style>
